<template>
	<view class="content">
		<view class="success" v-if="payState==1">
			<view class="hader">
				<image class="img" src="../../static/images/成功.png"></image>
				<view class="title">Payment Success</view>
			</view>
			<view class="Exhibition">
				<view class="Exhibition_name">Game gold purchase</view>
				<view class="Exhibition_text">
					<image class="img1" src="../../static/images/gold.png"></image>
					<view class="text_name">{{ordervalue.order_desc}}</view>
				</view>
			</view>
			<!-- <view class="label" v-if="ordervalue&&ordervalue.video">
				<image class="img" :src="ordervalue.video.coverImg"></image>
				<view class="detailed">
					<view class="detailed_text">{{ ordervalue.video.name }}</view>
					<view class="detailed_subtext">{{ ordervalue.type=='ALL'?'全站所有视频任意查看':ordervalue.video.collectCount + '集全' }}</view>
					<view class="money">${{  ordervalue.video.money/100 }}</view>
				</view>
			</view>											 -->
			<view class="Repayment" @tap="BackHomepage">Back homepage</view>
			<view class="order_detail">
				<view class="labeltwo">
					<view class="field">Account：</view>
					<view class="value">{{ ordervalue.email }}</view>
				</view>
				<view class="labeltwo">
					<view class="field">Order number：</view>
					<view class="value" @tap="copyordernum">{{ordervalue.order_num }} <span style="color: black;"> | copy</span></view>
				</view>
				<view class="labeltwo">
					<view class="field">Order time：</view>
					<view class="value">{{ ordervalue.create_time }} </view>
				</view>
				<view class="labeltwo">
					<view class="field" style="width: 300rpx;">Mode of payment：</view>
					<view class="value" style="width: 370rpx;">{{  ordervalue.pay_type }}</view>
				</view>
				<view class="labeltwo" style="margin-bottom: 30rpx;">
					<view class="field">Order amount:</view>
					<view class="value" style="color:rgba(255, 87, 51, 1);font-size: 34rpx;">${{  ordervalue.money/100 }}</view>
				</view>
				<view class="linktit">Lucky draw platform link:</view>
				<view class="link" @tap="tolink">{{ ordervalue.link }}</view>
				<view class="copy" @tap="copylink">Copy</view>
			</view>
			<view class="order_detail" style="margin-bottom: 50rpx;">
				<view class="facebook">
					<view class="name">Facebook：<span class="span1">18000158956</span></view>
					<view class="button" @tap="copyfacebook">Copy</view>
				</view>
			</view>
		</view> 
		<view class="success" v-if="payState==0">
			<view class="hader">
				<image class="img" src="../../static/images/失败.png"></image>
				<view class="title">Payment Failure</view>
			</view>
			<view class="Exhibition">
				<view class="Exhibition_name">Game gold purchase</view>
				<view class="Exhibition_text">
					<image class="img1" src="../../static/images/gold.png"></image>
					<view class="text_name">{{ordervalue.order_desc  }}</view>
				</view>
			</view>
			<!-- <view class="label" v-if="ordervalue&&ordervalue.video">
				<image class="img" :src="ordervalue.video.coverImg"></image>
				<view class="detailed">
					<view class="detailed_text">{{ ordervalue.video.name }}</view>
					<view class="detailed_subtext">{{ ordervalue.type=='ALL'?'全站所有视频任意查看':ordervalue.video.collectCount + '集全' }}</view>
					<view class="money">${{  ordervalue.video.money/100 }}</view>
				</view>
			</view> -->
			<view class="Refresh" @tap="getordernumber">
				<image class="img" src="../../static/images/刷新.png"></image>
				<view class="Refresh_text">Click refresh order status</view>
			</view>
			<view class="Repayment" @tap="Repayment">Pay Again</view>
			<!-- 订单详情 -->
			<view class="order_detail">
				<view class="labeltwo">
					<view class="field">Account：</view>
					<view class="value">{{ ordervalue.email }}</view>
				</view>
				<view class="labeltwo">
					<view class="field">Order number：</view>
					<view class="value" @tap="copyordernum">{{ordervalue.order_num }} <span style="color: black;"> | copy</span></view>
				</view>
				<view class="labeltwo">
					<view class="field">Order time：</view>
					<view class="value">{{ ordervalue.create_time }} </view>
				</view>
				<view class="labeltwo">
					<view class="field" style="width: 300rpx;">Mode of payment：</view>
					<view class="value" style="width: 370rpx;">{{  ordervalue.pay_type }}</view>
				</view>
				<view class="labeltwo" style="margin-bottom: 30rpx;">
					<view class="field">Order amount:</view>
					<view class="value" style="color:rgba(255, 87, 51, 1);font-size: 34rpx;">${{  ordervalue.money/100 }}</view>
				</view>
				<view class="linktit">Lucky draw platform link:</view>
				<view class="link" @tap="tolink">{{ ordervalue.link }}</view>
				<view class="copy" @tap="copylink">Copy</view>
			</view>
			<view class="order_detail" style="margin-bottom: 50rpx;">
				<view class="facebook">
					<view class="name">Facebook：<span class="span1">18000158956</span></view>
					<view class="button" @tap="copyfacebook">Copy</view>
				</view>
			</view>
		</view>
		<view class="success" v-if="payState==2">
			<view class="hader">
				<!-- <image class="img" src="../../static/images/失败.png"></image> -->
				<view class="title2">Payment inquiry, please wait...</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { getrequest, postrequest } from '../../util/api'
	export default {
		data() {
			return {
				payState:2, // 是否成功支付
				ordervalue:{}, //订单所有信息
				backcideoUrl:'', //跳转播放的连接
				timer:null, //刷新订单定时器
				requestNum:1, //刷新的次数
				emait:'', //邮箱
				orderNum:'',  //订单号
				link:'',
			};
		},
		async onLoad(option) {

			console.log('e',option)
			this.orderNum = option.orderNum
			this.channelNo = uni.getStorageSync('channelNo') || ''
			this.emait = option.userName
			this.userId = uni.getStorageSync('userId') || ''
			this.backcideoUrl = uni.getStorageSync('backcideoUrl') || ''
			this.href = uni.getStorageSync('href') || ''

			const that = this
			this.timer = setInterval(() => {
				if (that.requestNum >= 6) {
					clearInterval(that.timer);
					return;
				}
					// 请求订单信息
					that.getordernumber()
					that.requestNum++;
			}, 1500);

			// 获取客服
			// await this.getpayuse()


        },
		methods: {
			// 请求产品订单
			async getordernumber() {
				let params = {
					order_num: this.orderNum ,
				}
				const res = await getrequest('/api/order/get_order',params)
				console.log('订单结果',res)
				if(res.code == 200){
					this.ordervalue = res.data
					this.payState = this.ordervalue.pay_state
					clearInterval(this.timer);
				}
			},
			// 重新支付
			Repayment(){
				// window.location.href = this.ordervalue.payUrl
			},
			// 复制facebook账号
			copyfacebook(){
				uni.setClipboardData({
					data: '18000158956',
					success: function() {
						uni.showToast({
							title: 'Copy successful',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 复制订单号
			copyordernum(){
				uni.setClipboardData({
					data: this.ordervalue.order_num,
					success: function() {
						uni.showToast({
							title: 'Successfully copied order number',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 复制播放链接
			copylink(){
				uni.setClipboardData({
					data: this.ordervalue.link,
					success: function() {
						uni.showToast({
							title: 'Copy successful',
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 回到首页
			BackHomepage(){
				window.location.href = this.href
			},
			// 跳转链接
			tolink(){
				window.location.href = this.ordervalue.link
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background: linear-gradient(180deg, rgba(200, 167, 250, 1) 0%, rgba(255, 255, 255, 1) 30.56%);
		// 成功页面
		.success{
			width: 750rpx;
			margin: 0 auto;
			.hader{
				width: 750rpx;
				height: 270rpx;
				padding: 20rpx 0 0 0;
				// border: 1px solid black;
				display: flex;
				.img{
					width: 80rpx;
					height: 80rpx;
					margin: 120rpx 0 0 50rpx;
				}
				.title{
					width: 600rpx;
					height: 90rpx;
					font-size: 30px;
					font-weight: 700;
					line-height: 112rpx;
					color: rgba(12, 13, 15, 1);
					margin: 100rpx 0 0 20rpx;

				}
				.title2{
					width: 700rpx;
					// height: 90rpx;
					font-size: 30px;
					font-weight: 700;
					line-height: 112rpx;
					color: rgba(12, 13, 15, 1);
					margin: 100rpx 0 0 20rpx;
				}
			}
			.Exhibition{
				width: 710rpx;
				height: 180rpx;
				border-radius: 10px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				margin: 0 auto;
				.Exhibition_name{
					width: 600rpx;
					height: 50rpx;
					font-size: 18px;
					font-weight: 700;
					line-height: 50rpx;
					color: rgba(44, 44, 44, 1);
					margin: 0rpx 0 0 40rpx;
					padding-top: 30rpx;
				}
				.Exhibition_text{
					width: 600rpx;
					height: 70rpx;
					// border: 1px solid black;
					margin: 20rpx 0 0 40rpx;
					display: flex;
					.img1{
						width: 60rpx;
						height: 60rpx;
					}
					.text_name{
						width: 400rpx;
						height: 50rpx;
						font-size: 40rpx;
						font-weight: 600;
						line-height: 60rpx;
						color: rgba(227, 60, 100, 1);
						margin-left: 10rpx;
					}
				}
			}
			.label{
				width: 710rpx;
				height: 220rpx;
				margin: 0 auto;
				border-radius: 10px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				display: flex;
				.img{
					width: 200rpx;
					height: 200rpx;
					margin: 10rpx;
				}
				.detailed{
					width: 460rpx;
					height: 200rpx;
					margin-left: 10rpx;
					.detailed_text{
						width: 480rpx;
						height: 50rpx;
						font-size: 32rpx;
						line-height: 50rpx;
						color: rgba(0, 0, 0, 1);
						// border: 1px solid black;
						margin: 16rpx 0 0 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
					}
					.detailed_subtext{
						width: 480rpx;
						height: 50rpx;
						font-size: 28rpx;
						line-height: 50rpx;
						margin: 10rpx 0 0 0;
						font-weight: 500;
						color: rgba(173, 173, 179, 1);
					}
					.money{
						width: 480rpx;
						height: 50rpx;
						font-size: 20px;
						font-weight: 600;
						line-height: 50rpx;
						color: rgba(227, 60, 100, 1);
						margin: 20rpx 0 0 0;
					}
				}

			}
			.order_detail{
				width: 700rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				padding: 10rpx 0 10rpx 10rpx;
				border-radius: 10px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				.labeltwo{
					width: 700rpx;
					// height: 50rpx;
					margin: 40rpx 0 0 0;
					display: flex;
					.field{
						width: 222rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
						margin: 0 0 0 16rpx;
						// border: 1px solid black;
					}
					.value{
						width: 450rpx;
						text-align: right;
						font-size: 28rpx;
						line-height: 40rpx;
						color: rgba(128, 128, 128, 1);
						// border: 1px solid black;
					}
				}
				.linktit{
					width: 670rpx;
					height: 40rpx;
					margin: 0 auto;
					margin-top: 30rpx;
					font-size: 14px;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 1);	
				}
				.link{
					width: 630rpx;
					height: 80rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					font-size: 14px;
					line-height: 20.27px;
					color: rgba(88, 132, 252, 1);
				}
				.copy{
					width: 650rpx;
					height: 70rpx;
					border-radius: 6px;
					border: 1px solid rgba(255, 87, 51, 1);
					margin: 0 auto;
					margin-top: 70rpx;
					margin-bottom: 40rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
					color: rgba(255, 87, 51, 1);
				}
				.facebook{
					width: 700rpx;
					// height: 50rpx;
					margin: 40rpx 0;
					display: flex;
					.name{
						width: 500rpx;
						height: 40rpx;
						font-size: 28rpx;
						line-height: 60rpx;
						color: rgba(0, 0, 0, 1);
						// border: 1px solid black;
						margin-left: 20rpx;
						.span1{
							color: rgba(128, 128, 128, 1);
						}
					}
					.button{
						width: 150rpx;
						height: 50rpx;
						border-radius: 6px;
						border: 1px solid rgba(255, 87, 51, 1);
						font-size: 26rpx;
						line-height: 50rpx;
						color: rgba(255, 87, 51, 1);
						text-align: center;
					}
				}
			}
			// 重新支付的两个按钮
			.Refresh{
				width: 450rpx;
				height: 50rpx;
				display: flex;
				margin: 0 auto;
				margin-top: 40rpx;
				margin-bottom: 20rpx;
				// border: 1px solid black;
				.img{
					width: 40rpx;
					height: 40rpx;
					margin: 10rpx 0 0 0;
				}
				.Refresh_text{
					width: 400rpx;
					height: 40rpx;
					font-size: 32rpx;
					line-height: 50rpx;
					color: rgba(255, 87, 51, 1);
					// text-align: left;
					margin: 4rpx 0 0 10rpx;
				}
			}
			.Repayment{
				width: 670rpx;
				height: 80rpx;
				border-radius: 30px;
				background: rgba(255, 87, 51, 1);
				margin: 0 auto;
				margin-top: 20rpx;
				font-size: 32rpx;
				line-height: 80rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
	}
</style>
